/* eslint-disable prettier/prettier */
import React, { useState, useEffect } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    TextInput,
    Button,
    Image
} from 'react-native';
import { useAuth } from '../context/AuthProvider';

const CustomerService = ({ route }) => {
    const { user } = useAuth()
    const id = route.params.id;
    const avatar=route.params.avatar
    const [items, setItems] = useState([]);
    const [message, setmessage] = useState("");
    const [receiver, setReceiver] = useState(user.userName);
    const [value, onChangeText] = React.useState('');
    const [page, setPage] = useState(1);

    function MessageList(props) {
        const items = props.items;
        const receiver = props.receiver;
        const listItems = items.map((item, index) => {
            return (
                <View key={index} style={[styles.chatMessage, receiver == item.name ? styles.chatReceiver : null]}>
                    {/* <Image
                        style={{height:50,width:50}}
                        source={{uri: receiver == item.name ?'data:image/jpeg/jpg;base64,' +avatar:'data:image/jpeg/jpg;base64,' + item.avatarUrl}}
                    /> */}
                    <Text style={styles.chatNameReceiver}>{item.name}</Text>
                    <Text style={styles.messageText}>{item.message}</Text>
                </View>
            );
        },
        );
        return (
            <>{listItems}</>
        );
    }

    useEffect(() => {
        setReceiver(user.userName)
        fetch('http://10.7.89.174:3000/list',
            {
                method: 'POST',
                body: JSON.stringify({
                    AuserName: id,
                    BuserName: user.userName,
                    message: message
                })
            })
            .then(res => res.json())
            .then(res => {
                if (page == 1) {
                    setItems(res.List)
                    console.log(list)
                }
                else {
                    setItems([...list, ...res.List])
                }
            })
    }, [page]);

    //发送消息
    const sendMessage = (message) => {
        let newItems = JSON.parse(JSON.stringify(items));
        newItems.push({ name: receiver, message: message });
        setItems(newItems);
    };
    const sendDo = () => {
        sendMessage(message);
        fetch('http://10.7.89.174:3000/addlist',
            {
                method: 'POST',
                body: JSON.stringify({
                    AuserName: id,
                    BuserName: user.userName,
                    name: user.userName,
                    message: message
                })
            })
            .then(res => res.json())
            .then(res => {
                console.log(res)
            })
    };

    return (
        <>
            <SafeAreaView style={styles.mainContent}>
                <ScrollView style={styles.chatBody}>
                    <View style={{ height: 15 }}></View>
                    <MessageList items={items} receiver={receiver} />
                </ScrollView>
                <View style={{ flex: 2,height:"140%" }}>
                    <TextInput
                        style={{ height: 36, borderColor: 'gray', borderWidth: 1, width: "80%",marginBottom:0,marginTop:"90%" }}
                        onChangeText={text => setmessage(text)}
                        placeholder={'开始聊天吧'}
                        value={message}
                        onSubmitEditing={sendDo}
                    />
                    <View style={{ width: "20%",marginLeft:"80%",marginTop:-36,height:50 }}>
                        <Button
                            onPress={sendDo}
                            title="发送"
                            color="orange"
                        />
                    </View>
                </View>
            </SafeAreaView>
        </>
    );
};

const styles = StyleSheet.create({
    mainContent: {
        flex: 1,
        backgroundColor: '#ededed',
        height:"140%"
    },
    chatBody: {
        flex: 1,
        padding: 10,
        height:"140%"
    },
    chatMessage: {
        position: 'relative',
        backgroundColor: 'grey',
        padding: 10,
        borderRadius: 10,
        alignSelf: 'flex-start',
    },
    chatReceiver: {
        marginLeft: 'auto',
        backgroundColor: 'lightgreen',
        height: 50,
    },
    messageText: {
        fontSize: 20,
        marginTop:-50
    },
    chatName: {
        fontSize: 12,
        position: 'absolute',
        top: -18,
        fontWeight: 'bold',
    },
    chatNameReceiver: {
        fontSize: 15,
        position: 'absolute',
        top: -18,
        fontWeight: 'bold',
        marginLeft: 'auto',
    },
    chatTimeStamp: {
        marginLeft: 10,
        fontSize: 12,
    },
});

export default CustomerService